<template>
    <div class="page flex-column flex-center" v-loading="loading">
        <div class="page-header flex-row flex-item" v-if="type === 'diagram'">
            <el-radio-group v-model="filterData.network" size="small" class="left-btn" @change="getOrgList">
                <el-radio-button v-for="item in networks" :label="item.value" :key="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
            <div class="flex1"></div>
            <el-select v-model="filterData.orgId"
                       size="small"
                       filterable
                       @change="getFire"
                       class="filter-item"
                       placeholder="请输入单位名称">
                <el-option
                        v-for="item in orgList"
                        :key="item.id"
                        :label="item.orgName"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="filterData.fireId"
                       size="small"
                       filterable
                       @change="getChildData"
                       class="filter-item"
                       placeholder="请选择">
                <el-option
                        v-for="item in fireList"
                        :key="item.id"
                        :label="item.fireName"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button style="width: 100px" type="primary" size="mini" @click="switchView('detail')">查看详情</el-button>
        </div>
        <div v-else class="page-header flex-row flex-item">
            <tz-filter @change="filterChange" :filter-data="filterData">
                <template v-slot:default="scope">
                    <el-select v-model="scope.data.orgId"
                               size="small"
                               filterable
                               clearable
                               @change="getFire"
                               class="table-filter-item"
                               placeholder="请输入单位名称">
                        <el-option
                                v-for="item in orgList"
                                :key="item.id"
                                :label="item.orgName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="scope.data.fireId"
                               size="small"
                               filterable
                               @change="getChildData"
                               class="table-filter-item"
                               placeholder="请选择">
                        <el-option
                                v-for="item in fireList"
                                :key="item.id"
                                :label="item.fireName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input class="table-filter-item"
                              :maxlength="100"
                              v-model.trim="scope.data.srcAddressContent"
                              size="small"
                              clearable
                              placeholder="请输入源ip地址"></el-input>
                    <el-input class="table-filter-item"
                              :maxlength="100"
                              v-model.trim="scope.data.destAddressContent"
                              size="small"
                              clearable
                              placeholder="请输入目的ip地址"></el-input>
                </template>
            </tz-filter>
            <div class="flex1"></div>
            <el-button style="width: 100px; margin-bottom: 10px" type="primary" size="mini" v-if="type === 'detail'" @click="switchView('diagram')">返回</el-button>
        </div>
        <coupling-detail v-if="type === 'detail'" ref="detail" :filterData="filterData" :isEq="isEq"/>
        <div v-if="type === 'diagram'" class="flex1 flex-column flex-item page-body">
            <coupling-diagram ref="diagram" :filterData="filterData"/>
        </div>
    </div>
</template>

<script>
import { networks } from '@/assets/dict'
import couplingDetail from '@/view/network/modules/couplingDetail';
import couplingDiagram from '@/view/network/modules/couplingDiagram';
export default {
  name: 'coupling',
  components: {
    couplingDetail,
    couplingDiagram
  },
  data() {
    return {
      type: 'diagram',
      loading: false,
      networks,
      filterData: {
        srcAddressContent: '',
        destAddressContent: '',
        orgId: '',
        fireId: '',
        network: 'JZW'
      },
      name: '',
      orgList: [],
      fireList: [],
      timer: null,
      isEq: 0
    };
  },
  methods: {
    filterChange(res) {
      this.isEq = res.isEq
      this.$refs['detail'].refresh()
    },
    inputChange() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.$refs[this.type].refresh()
      }, 500)
    },
    switchView(type) {
      this.type = type
      if (this.type === 'diagram') {
        this.$nextTick(() => {
          this.filterData.orgId ? this.$refs[this.type].refresh() : this.getOrgList()
        })
      }
    },
    getOrgList() {
      this.loading = true
      this.fireList = []
      this.$http.get('/topu/getOrgList', {
        params: {
          network: this.filterData.network
        }
      }).then(res => {
        this.orgList = res || []
        if (this.orgList[0]) {
          this.filterData.orgId = this.orgList[0].id
          if (this.filterData.orgId) {
            this.getFire()
          }
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '加载防火墙列表失败')
      }).finally(() => {
        this.loading = false
      })
    },
    getFire() {
      this.fireList = []
      this.filterData.fireId = ''
      if (this.type === 'detail' && !this.filterData.orgId) {
        this.$refs[this.type].refresh()
        return
      }
      this.loading = true
      this.$http.get(`/topu/getFireByOrgId/${this.filterData.orgId}`).then(res => {
        this.fireList = res || []
        if (this.fireList.length) {
          this.filterData.fireId = this.fireList[0].id || ''
          this.getChildData()
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '加载防火墙列表失败')
      }).finally(() => {
        this.loading = false
      })
    },
    getChildData() {
      const {orgId, fireId} = this.filterData
      if (orgId && fireId) {
        this.$nextTick(() => {
          this.$refs[this.type].refresh()
        })
      } else {
        this.$TZmessage.warning('请先选择单位和防火墙')
      }
    }
  },
  mounted() {
    this.getOrgList()
  }
};
</script>

<style lang="scss" scoped>
    .page {
        overflow: auto;
        .page-header {
            width: 100%;
            .filter-item {
                width: 200px;
                margin: 5px;
            }
        }
        .page-body {
            max-height: 100%;
            overflow: auto;
            width: 100%;
            box-sizing: border-box;
            padding: 25px
        }
    }
</style>